const resolveDir = require('./paths');
const {
  merge
} = require('webpack-merge');
const {
  DefinePlugin,
  DllReferencePlugin
} = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 导入其它的配置
const prodConfig = require('./webpack.config.prod')
const devConfig = require('./webpack.config.dev')

const common = (isProd) => {
  return {
    entry: './src/index.js',
    // entry: {
    //   index: './src/index.js',
    //   api: './src/js/api.js'
    // },
    resolve: {
      extensions: ['.js', '.json', '.ts', '.jsx'],
      alias: {
        '@': resolveDir('./src')
      }
    },
    mode: 'development',
    output: {
      filename: 'js/[name].build.js', // 多个拆出的js包
      path: resolveDir('dist'),
    },
    // optimization: {
    //   minimize: true,
    //   minimizer: [
    //     new TerserWebpackPlugin({

    //     })
    //   ],
    //   chunkIds: 'named', // 拆包算法 development默认named production为deterministic
    //   splitChunks: {
    //     chunks: 'all',
    //   }
    // },
    optimization: {
      runtimeChunk: true
    },
    externals: {
      lodash: '_'
    },
    module: {
      rules: [{
          test: /\.css$/,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                esModule: false
              }
            },
            'postcss-loader'
          ]
        },
        {
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            'less-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.(png|svg|gif|jpe?g)$/,
          type: 'asset',
          generator: {
            filename: 'img/[name].[hash:6].[ext]',
          },
          parser: {
            dataUrlCondition: {
              maxSize: 10 * 1024
            }
          }
        },
        {
          test: /\.(ttf|woff2?)$/,
          type: 'asset/resource',
          generator: {
            filename: 'font/[name].[hash:3][ext]'
          }
        },
        {
          test: /\.js$/,
          use: ['babel-loader']
        },
        {
          test: /\.ts$/,
          use: ['babel-loader']
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: '模板文件html',
        template: './public/index.html'
      }),
      new DefinePlugin({ // 指定全局变量，这里解决模板中使用的
        BASE_URL: '"./"',
        A: '1', // string类型？
        B: '"2"', // 希望是string类型
      }),
      new DllReferencePlugin({
        context: resolveDir('./'),
        manifest: resolveDir('./dll/lodash.manifest.json')
      }),
      new AddAssetHtmlWebpackPlugin({
        outputPath: 'js',
        filepath: resolveDir('./dll/dll_lodash.js')
      })
    ]
  }
}
module.exports = env => {
  const isProd = env.production;

  const config = isProd ? prodConfig : devConfig;

  return merge(common(isProd), config);
}